<template>
  <div>
    <div class="btn-container">
      <div class="btn" @click="handleCancelColor">取消</div>
      <div class="btn confirm-btn" @click="handleConfirmColor">确定</div>
    </div>
    <SketchColor v-model="colors"></SketchColor>
  </div>
</template>

<script>
  import SketchColor from './SketchColor';
  export default {
    components: {
      SketchColor
    },
    props: {
      defaultColor: {
        type: Object,
        default: () => {
          return {
            hex: '#000000',
          }
        }
      }
    },
    data() {
      return {
        colors: this.defaultColor
      }
    },
    watch: {
      defaultColor: {
        immediate: true,
        handler(val, oldVal) {
          if (val) {
            this.colors = val
          }
        }
      },
    },
    methods: {
      handleConfirmColor() {
        this.$emit('handleConfirmColor', this.colors.hex)
      },

      handleCancelColor() {
        this.$emit('handleCancelColor')
      }
    }
  }
</script>

<style lang="less">
.btn-container{
  display: flex;
  padding: 12px 12px 0 12px;
  justify-content: space-between;

  .btn{
    padding: 6px;
    color: #666;
  }

  .confirm-btn{
    color: #8773f9;
  }
}
</style>
